<template>
  <div>
    <h2 v-if="tips"> 用户已完成授权，请您选择需要查看的报告！</h2>
    <div class="reportBox">
      <div v-for="i of list" class="ZCP000-report-model"
           style="display: inline-block; color: rgb(34, 86, 134); cursor: pointer;">
        <div class="reportName">
          <input :id="i.code" class="radio" type="radio" name="contact" :value="i.id" v-model="choose"/>
          <label :for="i.code">
            <span style="font-weight: bold; color: rgb(34, 86, 134); font-size: 16px; line-height: 20px;">{{
                i.name
              }}</span>
            <div style="padding: 10px 0px">
              <p style="font-size: 12px;">{{ i.explain }}</p>
              <!--          <p style="font-size: 12px; padding-top: 8px;">使用范围更广</p>-->
              <button type="button" class="ZCP000-button-css"><span>{{ i.price }}元/份</span></button>
            </div>
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {product} from "@/api/system/beiDiao";

  export default {
    name: "temp",
    props: {
      tips: {
        default: true,
        type: Boolean
      }
    },
    data() {
      return {
        choose: null,
        list: null
      }
    },
    watch: {
      'choose': {
        handler(newValue) {
          this.$emit('choose', newValue);
        }
      }
    },
    created() {
      product().then(res => {
        this.list = res.data
      })
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .reportBox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .ZCP000-report-model {
    height: 140px;
    width: 200px;
    background-image: url("../../../assets/images/img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 16px;
    padding-left: 24px;
    box-sizing: border-box;
  }

  .reportName {
    display: flex;
    justify-content: start;
    align-items: start;

    label {
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: start;
    }
  }

  .radio {
    margin: 3px;
  }

  p {
    margin: 0;
  }

  .ZCP000-button-css {
    padding: 8px 15px;
    margin-top: 6px;
    border: none;
    color: #fff;
    width: 90px;
    line-height: 10px;
    background: linear-gradient(99deg, #ff944f, #ffc78a);
    border-radius: 16px;
  }


  #hmd {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;

    .bq {
      padding: 2px;
      border-radius: 2px;
      margin-bottom: 2px;
      margin-right: 2px;
      color: #fff;
      background-color: red;
    }
  }

  .i2 {
    margin-right: 4px
  }
</style>
